<!DOCTYPE html>
<html ng-app="dbcApp">
<head>
<meta charset="utf-8">
<title>&{'site.title'}</title>
<link rel="stylesheet" media="screen" href="@{'/public/stylesheets/bootstrap.min.css'}">
<link rel="stylesheet" media="screen" href="@{'/public/stylesheets/bootstrap-theme.min.css'}">
<link rel="stylesheet" media="screen" href="@{'/public/stylesheets/font-awesome.min.css'}">
<link rel="stylesheet" media="screen" href="@{'/public/stylesheets/style.css'}">
</head>
<body ng-controller="basicCtrl">

<!-- #nav -->
<nav class="navbar navbar-inverse navbar-fixed-top">
	<div class="container">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
				<span class="sr-only">toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a href="#" class="navbar-brand">&{'site.brand'}</a>
		</div>
		<div id="navbar" class="navbar-collapse collapse">
			<ul class="nav navbar-nav"></ul>
		</div>
	</div>
</nav>
<!-- #nav -->

<!-- #body -->
<div class="container" ng-controller="indexCtrl">
	<div class="row">
		<!-- #tables -->
		<div class="col-sm-3">
			<div class="list-group">
				<div class="list-group-item list-group-caption">
					<div class="row">
						<div class="col-sm-9">
							<p class="form-control-static" ng-show="empty(tables)"><i class="fa fa-spinner fa-spin"></i> &{'common.loading'}</p>
							<input type="text" class="form-control" placeholder="&{'index.search.keyword'}" ng-model="tableKeyword" ng-hide="empty(tables)">
						</div>
						<div class="col-sm-3 padding-left-zero">
							<button type="button" class="btn btn-primary btn-block"><i class="fa fa-plus fa-lg"></i></button>
						</div>
					</div>
				</div>
				<a href="#" title="{{table.name}}" class="list-group-item an" ng-repeat="table in tables | filter: tableKeyword" ng-class="isActiveTable(table)" ng-click="activeTable(table)" ng-bind="table.code"></a>
			</div>
		</div>
		<!-- #tables -->
		
		<!-- #details -->
		<div class="col-sm-9 an" ng-include="mainUrl"></div>
		<!-- #details -->
	</div>
</div>
<!-- #body -->

<!-- #script -->
<script type="text/javascript" src="@{'/public/javascripts/jquery-2.1.3.min.js'}"></script>
<script type="text/javascript" src="@{'/public/javascripts/angular.min.js'}"></script>
<script type="text/javascript" src="@{'/public/javascripts/angular-animate.min.js'}"></script>
<script type="text/javascript" src="@{'/public/javascripts/angular-sanitize.min.js'}"></script>
<script type="text/javascript" src="@{'/public/javascripts/bootstrap.min.js'}"></script>
<script type="text/javascript" src="@{'/public/javascripts/dbcenter.js'}"></script>
<script type="text/javascript">
'use strict';
function indexCtrl($scope, $http, $filter) {
	angular.extend($scope, {
		// 初始化
		init: function() {
			$scope.loadTables();
		},
		
		// 加载数据库表列表
		loadTables: function() {
			$http({
				method: 'get',
				url: '@{Databases.tables()}/main'
			}).success(function(data) {
				$scope.tables = $filter('orderBy')(data, 'code');
				$scope.activeTable($scope.tables[0]);
			});
		},
		
		// 激活数据库表
		activeTable: function(table) {
			$scope.table = table;
			$scope.mainUrl = '@{Databases.table()}?' + table.id;
		},
		
		// 判断是否为当前激活数据库表
		isActiveTable: function(table) {
			return ($scope.table === table) ? 'active' : '';
		}
	}).init();
}
</script>
<!-- #script -->

</body>
</html>
